<template>
  <el-dialog
    :visible.sync="showVisible"
    center
    :show-close="false"
    width="500px"
    append-to-body
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <div class="b g3 f16 tl" slot="title">
      <div class="ks-row-between pl15 pr15">
        <span>添加云环境部署实例</span>
        <span class="el-icon-close g9 f26 poi" @click="handleCancel"></span>
      </div>
    </div>
    <el-form class="pl30 pr30" :model="formData" ref="form" label-width="80px">
      <el-form-item
        label="云环境"
        prop="env"
        :rules="[
          { required: true, message: '云环境不能为空', trigger: 'change' },
        ]"
      >
        <el-select
          clearable
          @change="handleChange"
          style="width: 100%"
          v-model="formData.env"
        >
          <el-option
            v-for="item in envList"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="应用实例"
        prop="instanceKey"
        :rules="[
          {
            required: true,
            message: '应用实例不能为空',
            trigger: 'change',
          },
        ]"
      >
        <el-select style="width: 100%" v-model="formData.instanceKey">
          <el-option
            v-for="item in instanceList"
            :key="item.key"
            :value="item.key"
            :label="item.name"
            :disabled="item._disabled"
          />
        </el-select>
      </el-form-item>
    </el-form>

    <div slot="footer" class="tr">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getHmruntimeenvironmentTenantList } from "@/apis/dev-centre/HmRuntimeEnvironmentController"
import { getHmruntimeinstanceAppList } from "@/apis/dev-centre/HmRuntimeInstanceController"
import { mapGetters } from "vuex"
export default {
  name: "DeployForm",
  data() {
    return {
      showVisible: false,
      formData: {},
      envList: [],
      instanceList: [],
    }
  },
  computed: {
    ...mapGetters(["APP_INFO"]),
  },
  methods: {
    getEnvList() {
      getHmruntimeenvironmentTenantList({
        headers: { tenantId: this.APP_INFO.tenantId },
      })
        .then((res) => {
          this.envList = res
        })
        .catch(() => {
          this.envList = []
        })
    },
    getExampleList(v) {
      getHmruntimeinstanceAppList({
        runtimeId: v,
      })
        .then((res) => {
          res.forEach((i) => {
            i._disabled =
              this.disabledList.findIndex((j) => j.env === i.key) > -1
          })
          this.instanceList = res
        })
        .catch(() => {
          this.instanceList = []
        })
    },
    addForm(disabledList) {
      this.disabledList = disabledList
      this.showVisible = true
      this.formData = {}
      this.getEnvList()
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    handleChange(v) {
      this.$set(this.formData, "instanceKey", null)
      this.$refs.form.validateField("instanceKey")
      this.instanceList = []
      if (!v) return
      this.getExampleList(v)
    },
    async submit() {
      try {
        await this.$refs.form.validate()
        let { env, instanceKey } = this.formData
        const item = this.instanceList.find((i) => i.key === instanceKey)
        const envItem = this.envList.find((i) => i.id === env)
        this.handleCancel()
        this.$emit("ok", {
          ...item,
          env: item.key,
          envName: envItem.name,
          instanceName: item.name,
        })
      } catch (error) {
        console.log(error)
      }
    },
    handleCancel() {
      this.envList = []
      this.instanceList = []
      this.showVisible = false
    },
  },
}
</script>

<style lang="scss" scoped></style>
